<template>
    <div id="myMap">
    </div>
</template>

<script setup>
    import {ref, reactive, onMounted} from "vue"
    import {useRoute, useRouter} from 'vue-router'

    const route = useRoute()
    const router = useRouter()
    import axios from 'axios'

    onMounted(async () => {
        //地图的初始化
        const BMapGL = window.BMapGL
        var map = new BMapGL.Map("myMap")
        map.centerAndZoom(new BMapGL.Point(117.220425, 39.113361), 11)
        map.enableScrollWheelZoom(true)
        /*
    *
    * 设置标记点
    * */
        //************************************************************************
        //添加自定义图标
        const iconStart = new BMapGL.Icon('/join-shop.png', new BMapGL.Size(60, 60))
        var ma
        ma = new BMapGL.Marker(new BMapGL.Point(117.220425, 39.113361), {
            icon: iconStart
        })
        map.addOverlay(ma)

        var infoWindow =new BMapGL.InfoWindow('详细地址：济南市|济南奥体中心体育场 <br>' +
            ' 时间: 2024.08.09 周五19:30  <br> <img  width="100px" src="https://img.alicdn.com/bao/uploaded/i3/2251059038/O1CN01HHNgjX2GdSbiwe4yx_!!0-item_pic.jpg_q60.jpg_.webp" style="margin-left: 100px" > ' , {
            width: 500,
            height: 300,
            title: '[济南]济南泉之声超级巨星演唱会'
        });

        ma.addEventListener('click', function () {
            map.openInfoWindow(infoWindow, new BMapGL.Point(117.220425, 39.113361))
        })
    })

  /*  //初始化LBS  服务  用里面的逆地址解析
    var geoc = new BMapGL.Geocoder();

    map.addEventListener("click", ({latlng}) => {
        console.log(latlng)
        //通过经纬度去拿地址
        geoc.getLocation(latlng, (rs) => {
            address.value = rs.address;
        })

    })*/


</script>

<style scoped lang="scss">


    .out {
        img {
            width: 100px;
        }
    }

    #myMap {
        height: 100vh;
    }

</style>
